import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { useNavigate } from "react-router-dom";

const Country = ({flag,name,population,region,capital,alpha3Code})=>{
  let navigate = useNavigate();
  return(
    <Grid item key={alpha3Code} xs={12} sm={6} md={3}>
    <Card
      sx={{ height: '100%',  display: 'flex', flexDirection: 'column' }}
    >
      <CardMedia
        component="img"
        sx={{
          // 16:9
          pt: '12%',
          height:200
        }}
        image={flag}
        alt={name}
      />
      <CardContent sx={{ flexGrow: 1 }}>
        <Typography gutterBottom variant="h5" component="h2">
          {name}
        </Typography>
        <Typography>
          population :{population}
        </Typography>
        <Typography>
          capital :{capital}
        </Typography>
        <Typography>
        region :{region}
        </Typography>
      </CardContent>
      <CardActions>
        <Button onClick={()=>navigate(alpha3Code)} size="small" sx={{color:"text.primary"}}>View Detail</Button>
      </CardActions>
    </Card>
  </Grid>)
}

export default Country;